<template>
  <div class="main-class">
    <!-- 顶部导航 -->
    <div style="width: 1230px; margin: auto">
      <w-header></w-header> 
    </div>
    <div class="mainC">
      <div id="classify" class="classify">
        <!-- logo -->
        <div class="logo" @click="$router.push('/')"></div>
        <!--添加商品 选择商品分类  -->
        <!-- 标题导航 -->
        <div class="titleNav">
          <span class="small active">选择商品分类</span>
          <span style="color: #ebebeb">|</span>
        </div>
        <w-panel-wrap>
          <w-panel>
            <div id="body">
              <div id="main">
                <div class="nav-list">
                  <div class="nav-item" v-for="(item,index) in goodsClassList" :key="index">
                    <ul>
                      <li v-for="(o,$index) in item" :key="$index" :class="{active: o.isSelected}" @click="nextClassify(o, item, index)">
                        <div class="icon"></div>
                        <div class="icons"></div>
                        <i></i>
                        <strong>{{o.className}}</strong>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="tip">您当前选择的商品类别是：
                <span>{{this.breakcrumb.join('>')}}</span>
              </div>
              <div class="btnDiv">
                <button class="btn main" @click="$router.go(-1)">上一步</button>
                <button class="btn main" style="margin-left: 54px" @click="onNext" id='aaa'>下一步</button>
              </div>
            </div>
          </w-panel>
        </w-panel-wrap>
      </div>
    </div>
  </div>
</template>

<script>
  // 获取接口对象
  import { apiGoods } from 'js/api'
  import { storage } from 'js/util'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        goodsClassId: '',
        goodsClassList: [],
        breakcrumb: [],
        levels: ''
      }
    },
    created() {
      this.getGoodsClassInfo({}, 0)
    },
    methods: {
      // 商品分类
      getGoodsClassInfo(gcId, level) {
        // 获取二级分类ID
        if (level == 2) {
          storage.set('goodsTwoId', gcId.gcId)
        }
        // 清空点击的分类后面的相应的值（放置之前点击的数据污染了）
        this.goodsClassList.splice(level, this.goodsClassList.length - level)
        apiGoods.getGoodsClassInfo(gcId).then((resp) => {
          if (resp == undefined || resp == 'undefined' || resp.goodsClassList == 0) {
            return
          }
          this.goodsClassList.splice(level, 1, resp.goodsClassList)
        })
      },
      // 选择商品的分类
      nextClassify(item, list, level) {
        // 清空
        if (level == 0) {
          this.breakcrumb = []
        }
        this.levels = level + 1
        list.forEach((o) => {
          this.$set(o, 'isSelected', false)
        })
        item.isSelected = !item.isSelected
        this.breakcrumb[level] = item.className
        this.getGoodsClassInfo({
          'gcId': item.goodsClassId
        }, level + 1)
        // 分类id提供商品增加
        this.goodsClassId = item.goodsClassId
      },
      // 下一步
      onNext() {
        if (this.goodsClassId == '') {
          $toast('请添加商品分类')
          return
        }
        // 跳转新增商品的路由
        this.$store.state.className = this.breakcrumb.join('>')
        const crumb = this.breakcrumb.join('>')
        const sketchid = this.$route.query.sketchid
        const goodsid = this.$route.query.goodsid
        if (sketchid) {
          this.$router.push(`/goods/info/${this.goodsClassId}?ladder=${this.levels}&gcname=${encodeURIComponent(crumb)}&sketchid=${sketchid}`)
        } else if (goodsid) {
          this.$router.push(`/goods/info/${this.goodsClassId}?ladder=${this.levels}&gcname=${encodeURIComponent(crumb)}&goodsid=${goodsid}`)
        } else {
          this.$router.push(`/goods/info/${this.goodsClassId}?ladder=${this.levels}&gcname=${encodeURIComponent(crumb)}`)
        }
      }
    }
  }
</script>

<style lang="scss">
  .main-class {
    // 顶部nav
    .m-app-header {
      position: relative;
    }
    .m-panel-wrap {
      width: 1230px;
      margin-top: 0px!important;
      overflow: auto!important;
    }
    .panel {
      padding: 0 20px!important;
    }
    .btn {
      width: 116px;
    }
  }
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.logo {
    width: 1230px;
    height: 50px;
    margin: 0 0 46px 20px;
    cursor: pointer;
    background: url('../../assets/new/logo.png') no-repeat;
  }
.m-panel-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-width: 1000px;
}
.titleNav {
  border: 1px solid #ebebeb;
  border-bottom: none;
  width: 100%;
  height: 50px;
  background-color: #fafafb;
  vertical-align: middle;
  .small {
    line-height: 50px;
    width: 180px;
    display: inline-block;
    text-align: center;
    color: #686868
  }
  .active {
    border-top: 2px solid #f352aa;
  }
}
.btnDiv {
  text-align: center;
  margin: auto
}
.mainC {
  width: 100%;
  background-color: #ffffff;
  .classify {
    width: 1230px;
    margin: auto;
    padding-top: 50px;
  }
}
#body {
  // width: 1259px;
  margin: 0 auto;
  height: 754px;
  .tip {
    font-size: 14px;
    margin-top: 22px;
    margin-left: 140px;
    color: #5E5E5E;
    margin-bottom: 46px;
    span {
      color: #73B1E0
    }
  }
}

#main {
  margin-top: 41px;
  // height: 332px;
  background-color: #EDEDED;
  .nav-list {
    margin: 10px 0 10px 15px;
    display: inline-block;
    background-color: #fff;
    .nav-item {
      display: inline-block;
      border-right: 1px solid #999;
      height: 200px;
      width: 260px;
      overflow-y: auto;
      padding: 10px;
      ul {
        width: 235px;
        li {
          position: relative;
          height: 30px;
          color: black;
          line-height: 30px;
          cursor: pointer;
          strong {
            padding-left: 20px;
          }
          .icon {
            position: absolute;
            top: 7px;
            left: 0px;
            width: 15px;
            height: 15px;
            background-image: url('../../assets/new/icon_classify.png');
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
          }
          &.active {
            .icon {
              // background-image: url();
            } 
            .icons {
              position: absolute;
              top: 7px;
              right: 10px;
              width: 15px;
              height: 15px;
              // background-image: url('../../assets/squery.png');
              background-size: 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
            background-color: #EDEDED;;
            color: $color-main;
          }
        }
      }
    }
  }
}
</style>